<template>
    <div class="uploaderBox">
        <!--检测更新-->
        <div class="check" v-if="checkMsg">{{ checkMsg }}</div>

        <!--更新提示-->
        <div class="updater" v-if="updaterShow">
            <div class="confirm">
                <div class="title">
                    <div class="icon appfont app-confirm"></div>
                    <div class="name">{{ title }}</div>
                </div>
                <div v-if="! progress.show" class="html" v-html="description"></div>
                <div v-if="! progress.show" class="panel">
                    <div class="btn success" @click="confirm">立即更新</div>
                    <div class="btn cancel" @click="cancel">下次再说</div>
                </div>

                <!--更新提示-->
                <div class="inProgress" v-if="progress.show">
                    <div class="bar">
                        <div class="inner" :style="{width: progress.percentage}"></div>
                        <div class="progress">
                            <div class="total">{{ progress.total }} &ndash;</div>
                            <div class="downloaded">&gt; {{ progress.downloaded }}</div>
                            <div class="percentage">{{ progress.percentage }}</div>
                        </div>
                    </div>
                    <div class="msg"><span>{{ progress.msg }}</span></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import updater from '../../import/autoUpdater';
import kit from '../../electron/helper/kit';

export default {
    name : 'updaterBox',
    props: {},
    data () {
        return {
            updaterShow: false,
            progress   : {
                show      : false,
                total     : '0B',
                downloaded: '0B',
                percentage: '0%',
                msg       : ''
            },
            title      : '',
            description: '',
            checkMsg   : '',
            newVersion : {},
            msgTimer   : null,
            closeTimer : null
        };
    },
    methods: {
        /*检查更新*/
        checkUpdate (check) {
            /*自动更新器初始化*/
            check && updater.initialize({
                delay              : 1000
                , CHECK_INFO       : msg => console.log(msg)
                , CHECK_ERROR      : msg => this.setCheckMsg(msg)
                , PARSE_INFO       : msg => console.log(msg)
                , PARSE_ERROR      : msg => this.setCheckMsg(msg)
                , NEW_VERSION      : data => this.confirmUpdate(data)
                , DOWNLOAD_PROGRESS: data => this.setProgress(data)
                , DOWNLOAD_INFO    : msg => this.setProgressMsg(msg)
                , DOWNLOAD_ERROR   : msg => this.setProgressError(msg)
                , RUN_SETUP_ERROR  : msg => this.setProgressError(msg)
                , RUN_SETUP_SUCCESS: msg => this.setProgressMsg(msg)
            });
        },

        /*设置检测提示并关闭*/
        setCheckMsg (msg, delay) {
            this.clearTimer();
            this.checkMsg = msg;
            this.msgTimer = setTimeout(() => this.checkMsg = '', delay || 2000);
        },

        /*清理提示关闭定时器*/
        clearTimer () {
            this.msgTimer && clearTimeout(this.msgTimer);
        },

        /**
         * 询问是否升级
         * @param newVersion
         */
        confirmUpdate (newVersion) {
            this.newVersion              = newVersion;
            let { version, description } = newVersion;

            this.setCheckMsg('', 0);
            this.updaterShow = true;
            this.title       = `发现新版本${version ? ` v${version}` : ''}`;
            this.description = description || '建议升级体验更多新特性';
        },

        /*确认升级*/
        confirm () {
            this.title         = `下载更新`;
            this.progress.show = true;

            /*通知主进程确认更新*/
            updater.renderConfirm(this.newVersion);
        },

        /*取消升级*/
        cancel () {
            this.setCheckMsg('', 0);
            this.updaterShow  = false;
            this.progress.msg = '';
        },

        /*下载进度*/
        setProgress ({ total, downloaded }) {
            this.progress.show       = true;
            this.progress.total      = kit.bytesSize(total);
            this.progress.downloaded = kit.bytesSize(total ? downloaded : 0);
            this.progress.percentage = `${Number(((total && downloaded) ? `${downloaded / total * 100}` : 0)).toPrecision(3)}%`;
        },

        /*设置下载进度框消息*/
        setProgressMsg (msg) {
            this.progress.msg = msg;
        },

        /*设置下载安装失败*/
        setProgressError (msg, delay) {
            this.closeTimer && clearTimeout(this.closeTimer);
            this.progress.msg = msg;
            this.closeTimer   = setTimeout(() => this.cancel(), delay || 2000);
        }
    }
};
</script>

<style lang="less" scoped>
.uploaderBox {
    .check {
        position        : fixed;
        z-index         : 30000;
        bottom          : 0px;
        left            : 0px;
        width           : @ui-left-width;
        background      : @ui-left-bg;
        color           : rgba(255, 255, 255, 0.5);
        height          : 40px;
        line-height     : 30px;
        display         : flex;
        justify-content : center;
        font-size       : 12px;
    }

    .inProgress {
        margin-top : 15px;
        width      : 100%;

        .bar {
            position              : relative;
            height                : 20px;
            -webkit-border-radius : 99px;
            -moz-border-radius    : 99px;
            border-radius         : 99px;
            display               : flex;
            width                 : 100%;
            background            : #ccc;
            overflow              : hidden;

            .inner {
                background            : @green-dark;
                color                 : #fff;
                -webkit-border-radius : 99px;
                -moz-border-radius    : 99px;
                border-radius         : 99px;
                position              : relative;
                z-index               : 1;
            }

            .progress {
                height          : 20px;
                position        : absolute;
                z-index         : 2;
                top             : 0;
                left            : 0;
                width           : 100%;
                display         : flex;
                align-items     : center;
                justify-content : center;
                color           : #fff;
                font-size       : 12px;

                .total {
                    flex-grow    : 0;
                    flex-shrink  : 0;
                    padding-left : 10px;
                }

                .downloaded {
                    flex-grow   : 1;
                    flex-shrink : 1;
                }

                .percentage {
                    flex-grow     : 0;
                    flex-shrink   : 0;
                    padding-right : 10px;
                }
            }
        }

        .msg {
            text-align      : center;
            margin-top      : 10px;
            display         : flex;
            align-items     : center;
            justify-content : flex-end;

            span {
                margin-right : 10px;
                font-size    : 12px;
                color        : #333;
            }
        }
    }

    .updater {
        width           : 100%;
        height          : 100%;
        background      : rgba(0, 0, 0, 0.5);
        position        : fixed;
        z-index         : 30000;
        top             : 0;
        left            : 0;
        display         : flex;
        align-items     : center;
        justify-content : center;

        .confirm {
            position              : relative;
            z-index               : 100;
            background            : #fff;
            color                 : #000;
            padding               : 20px;
            -webkit-border-radius : 10px;
            -moz-border-radius    : 10px;
            border-radius         : 10px;
            min-width             : 400px;
            max-width             : 600px;

            .title {
                .noSelect;
                display     : flex;
                font-size   : 18px;
                color       : #000;
                align-items : center;
                font-weight : bold;

                .appfont {
                    font-size    : 22px;
                    margin-right : 5px;
                }
            }

            .html {
                padding : 25px 0 25px 0;
            }
        }

        .panel {
            display         : flex;
            justify-content : flex-end;

            .btn {
                .noSelect;
                background            : #000;
                margin-left           : 6px;
                height                : 30px;
                line-height           : 30px;
                color                 : #fff;
                cursor                : pointer;
                -webkit-border-radius : 5px;
                -moz-border-radius    : 5px;
                border-radius         : 5px;
                padding               : 0 12px;
                font-size             : 12px;

                &.success {
                    background : #3b6de6;

                    &:hover {
                        background : #114ee2;
                    }
                }

                &.cancel {
                    background : rgba(0, 0, 0, 0.3);

                    &:hover {
                        background : rgba(0, 0, 0, 0.39);
                    }
                }
            }
        }
    }
}
</style>
